<template>
  <div>
    <el-dialog :visible.sync="fileVisible.v" v-dialogDrag>
      <div>
        数据类型：
        <el-select
          v-model="value" style="margin-left: 10px;" clearable placeholder="请选择数据"
          @change="changeDataFields" >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        数据字段：
        <el-select
          v-model="field"  style="margin-left: 10px;margin-top: 20px" multiple clearable placeholder="请选择字段">
          <el-option
            v-for="item in fieldOptions"
            :key="item.field"
            :label="item.field"
            :value="item.field">
          </el-option>
        </el-select>
      </div>
      <span>
          <el-button type="primary" style="margin-left: 30px;margin-top: 20px" @click="submit">确定</el-button>
          <el-button type="primary"  @click="cancel">取消</el-button>
        </span>
      <!--<v-btn @click="cancel">取消</v-btn>-->
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: "filePosition-Dialog",
    data() {
      return {
        options: [],
        fieldOptions:[],
        value: '',
        field: '',
        num:'',
      }
    },
    props: {
      fileVisible: Object,
    },
    methods: {
      showTable() {
        let that = this;
        this.$axios.get('/data/list?offset=0&size=12')
          .then(function (res) {
            if (res.code === 200) {
              let result = res.body.data;
              let options = [];
              for (let i = 0; i < result.length; i++) {
                let option = {};
                option.value = result[i].data.pk_meta_id;
                //num=result[i].data.pkMetaId;
                //option.value = "选项" + (i + 1);
                option.label = result[i].data.meta_name;
                //option.num=result[i].data.pkMetaId;
                options.push(option);
              }
              that.options = options;
            } else {
              // TODO 优化
              alert(res.message);
            }
          }).catch(function (err) {console.log(err);
        })
      },
      //当数据类型改变时，第二选择框显示当前数据的字段
      changeDataFields(value){
        this.num=value;
        this.showField();
      },
      showField(){
        let that = this;
        this.$axios.get("/data//field/" + this.num)
          .then(function (res) {
            let result = res.body;
            let options = [];
            for (let i = 0; i < result.length; i++) {
              let option = {};
              option.field = result[i].description;
              //option.field = result[x].dataId;
              //option.label = x;
              options.push(option);
            }
            that.fieldOptions = options;
          }).catch(function (err) {
          console.log(err);
        })
      },
      // reset(){
      //   this.$refs["value"].resetFields();
      //   value:'';
      //   values:'';
      // },
      submit() {
        this.fileVisible.v=false;
        //let that=this;
        let fileData='';
        for(let i=0;i<this.options.length;i++){
          if(this.value==this.options[i].value){
            fileData=this.options[i].label;
          }
        }
        fileData+=","+this.field;
        fileData=fileData.replace(/,/g,"&");
        fileData=fileData.replace(/&/,",");
        this.$Bus.$emit('fileData',fileData);
        console.log(fileData);
        // this.$axios.post(
        //   '/data/' + this.value+"?select="+this.field+"&"
        // )
        this.value='';
        this.num='';
        // this.field='';
      },
      cancel(){
        this.fileVisible.v=false;
        this.value='';
        this.num='';
        this.field='';
      },
    },
    mounted() {
      this.showTable();
      //this.showField();
      //this.resetForm();
      //this.$v.$reset();

    },
    created() {
      this.$Bus.$on('fileVisible.v', (e) => {
        this.fileVisible.v = e;
      })
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // }
    // reset(){
    //   //this.$refs[options].resetFields();
    // }
  }
</script>



<style scoped>

</style>
